<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>Watch 选项 监控数据</title>
</head>

<body>
    <h1>Watch 选项 监控数据</h1>
    <hr>
    <div id="app">
        <p>今日的温度是:&nbsp;{{temper}} °</p>
        <p>今日的温度是:{{dress}}</p>
        <button @click="add">升高温度</button>
        <button @click="reduce">降低温度</button>
    </div>
    <script type="text/javascript">
        var dressArr = ["T桖短袖", "夹克长裙", "棉衣羽绒服"];
        var app = new Vue({
            el: '#app',
            data: {
                temper: 26,
                dress: "夹克长裙"
            },
            methods: {
                add: function () {
                    this.temper += 3
                },
                reduce: function () {
                    this.temper -= 3
                }
            },
            // watch:{
            //     temper:function(newVal,oldVal){
            //         if(newVal >= 26){
            //             this.dress = dressArr[0]
            //         }else if(newVal <26 && newVal > 0){
            //             this.dress = dressArr[1]
            //         }else{
            //             this.dress = dressArr[2]
            //         }
            //     }
            // }
        });
        //有些时候我们会用实例属性的形式来写watch监控。也就是把我们watch卸载构造器的外部，这样的好处就是降低我们程序的耦合度，使程序变的灵活。
        app.$watch('temper', function (newVal, oldVal) {
            if (newVal >= 26) {
                this.dress = dressArr[0]
            } else if (newVal < 26 && newVal > 0) {
                this.dress = dressArr[1]
            } else {
                this.dress = dressArr[2]
            }
        })
    </script>
</body>

</html>